<template>
    <el-container>
        <el-dialog
                width="400px"
                :visible.sync="deleteshow"
                :modal="false"
        >
            <p>确认删除知识内容吗？</p>
            <el-button style="width: 40%" @click="deleterepositorycontext" type="success" plain>确认</el-button>
            <el-button style="width:40%;float: right" @click="deleteshow=false" type="primary" plain>取消</el-button>
        </el-dialog>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main>
            <div class="center">
                <el-row>
                    <el-button type="primary" plain style="right: 60px;margin-left: 300px"
                               @click="toDraftRepositoryContext(cid)"><i
                            class="el-icon-edit"
                    ></i>添加知识内容
                    </el-button>
                </el-row>


                <el-row>
                    <el-col span="7">
                        <div style="width: 300px"></div>
                    </el-col>
                    <el-col span="17">
                        <div :deleteshow="deleteshow" v-if="getData">
                            <el-row span="6" v-for="item in repository" :key="id" class="text item">
                                <el-card class="box-card"
                                >
                                    <div @click="toRepositoryContext(item.content_id)"><p class="context">
                                        {{item.content}}
                                    </p></div>

                                    <div style="margin-top: 30px">
                                        <el-button size="small" style="margin-top: 10px;margin-left: 50px"
                                                   @click="changedelte(item.content_id)">删除
                                        </el-button>
                                    </div>
                                </el-card>
                            </el-row>


                            <el-row>
                                <el-pagination
                                        layout="prev, pager, next"
                                        :total="1000">
                                </el-pagination>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer>
            <page-footer></page-footer>
        </el-footer>
    </el-container>
</template>

<script>
    import CliTitleStudent from "../../../components/base/cliTitleStudent";
    import CliMenu from "../../../components/base/cliMenu";
    import RepositoryOwner from "../../../components/info/repositoryOwner";
    import pageFooter from "../../../components/base/pageFooter";
    import POST from "../../../api/POST";
    import Cookies from "js-cookie";


    export default {
        name: "self-repository",
        components: {
            pageFooter, RepositoryOwner, CliMenu, CliTitleStudent
        },
        data() {
            return {
                deleteshow: false,
                cid: '',
                repository: [],
                uid: '',
                deleteid: '',
                getData: false,
            }
        },
        props: [],

        methods: {
            toDraftRepositoryContext(cid) {
                this.$router.push({path: '/repository/' + cid + '/draftrepositorycontext'});
            }, toRepositoryContext(contentid) {
                this.$router.push({
                    name: 'repository-cid-repositorycontext',
                    params: {cid: this.cid, uid: this.uid, contentid: contentid}
                });
            },
            changedelte(ccid) {
                this.deleteid = ccid;
                this.deleteshow = true;
            }, deleterepositorycontext() {
                let data = {'id': this.uid, 'collectbox_id': this.cid, 'content_id': this.deleteid};
                POST.deleteCollectboxContent(data).then(res => {

                });
                this.deleteshow = false;
            }
        }, created() {
            this.cid = this.$route.params.cid;
            console.log(this.cid);
            this.info = Cookies.get('info');
            this.info = JSON.parse(this.info);
            this.uid = this.info.account;
            console.log(this.uid);
            let data = {'id': this.uid, 'collectbox_id': this.cid};
            POST.showCollectboxContent(data).then(res => {
                this.repository = res.content
                this.getData = true;
            });
        }
    }
</script>

<style scoped>
    .center {
        width: 1000px;
        margin: 50px auto;
    }

    .box-card {
        margin-top: 20px;
        height: 150px;
        width: 150px;
    }
</style>
